<template>
	<view class="feedBack">
		<view class="feedbackCategory">
			<view style="margin-top: 20rpx;">
				反馈类别
			</view>

			<!-- 反馈标签 -->
			<view class="feedbackTab">
				<div class="flex-align-center">
					<div v-for="(i, j) in tabsOptions" :key="j" @click="switchTimeTab(j)"
						:class="currentIndex == j ? 'sel-stauts-class common' : 'stauts-class common'">

						<div>{{ i.value }}</div>


					</div>
				</div>
			</view>

		</view>
		<view class="feedbackContent">
			<view style="margin: 20rpx; 0">
				上传图片
			</view>
			<sunui-upimg1 :formData="imgFormData" :storageMode="storageMode" :header="header"
				:size="['200rpx', '200rpx']" btnName="上传图片" :uploadServerUrl="upPicUrl" ref="selectimgandupload1"
				@uploaded="imgLoaded1" @change="imgsChange1" :maxFileNumber="9"></sunui-upimg1>
			<view style="margin-top: 20rpx;">
				反馈内容
			</view>

			<view class="uni-textarea">
				<textarea v-model="form.feedbackContent" placeholder-style="color:#999;margin:15rpx"
					placeholder="请输入员工介绍信息，方便用户更好选择" />
			</view>
		</view>
		<view class="feedbackPhone">
			<view style="margin: 20rpx 0;">
				联系电话
			</view>
			<input v-model="form.contactInformation" class="uni-input" focus placeholder="请输入你的联系电话" />

		</view>
		<view class="sumbit-btn flex" @click="sumbit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		object2Url
	} from '@/utils/trans';
	export default {
		data() {
			return {
				currentIndex: 0,
				tabsOptions: [{
						value: 'BUG'
					},
					{
						value: '建议'
					},
					{
						value: '投诉'
					},
					{
						value: '吐槽'
					}
				],
				form: {
					// 反馈意见
					feedbackType: 'BUG',
					// 反馈图片
					feedbackUrl: '',
					// 联系电话
					contactInformation: '',
					// 反馈内容
					feedbackContent: ''
				},
				img: [],
				storageMode: '',
				photos: 'http://tmp/oPvxqRtPPstDa128a34f30dbb644483d8ec6e94e75c9.jpg',
				upPicUrl: '',
				imgFormData: null,
				alyOssSignatureInfo: null,
				header: null,
				timeDate: '',
				suffix: '',
				// 上传图片的数组
				uploaderArr: [],
				imgViewArr: [],
				imgStr: []
			}
		},
		onLoad() {

			this.getUploadConfig();
		},
		methods: {
			switchTimeTab(index) {
				this.currentIndex = index
				if (this.currentIndex == 0) {
					this.form.feedbackType = 'BUG'
				} else if (this.currentIndex == 1) {
					this.form.feedbackType = '建议'
				} else if (this.currentIndex == 2) {
					this.form.feedbackType = '投诉'
				} else if (this.currentIndex == 3) {
					this.form.feedbackType = '吐槽'
				}
			},

			// 获取上传图片配置
			async getUploadConfig() {
				const result = await this.$http.get({
					url: this.$api.getStorageConfig
				});
				if (result.code == 200) {
					this.storageMode = result.data.storageMode; // storageMode:2是‘阿里云’上传，3是‘七牛云’ 上传
					console.log('this.storageMode', this.storageMode);
				} else {
					console.log('result.message', result.message);
				}
			},
			// 上传图片返回
			imgLoaded1(e) {
				console.log('上传返回eeeee222============', e);
				try {
					this.img = [];
					for (let i = 0; i < e.length; i++) {
						this.img.push(e[i].url);
					}
				} catch (e) {
					this.img = [];
				}
				console.log('this.img=======', this.img);
				this.imgStr = this.img
				this.form.feedbackUrl = this.imgStr.length === 1 ? this.imgStr[0].toString() : this.imgStr.join(',');


			},
			// “上传图片”发生改变
			imgsChange1(file) {
				// 文件名
				this.timeDate = new Date().getTime();
				console.log('上传发生改变this.storageMode1111============', this.storageMode, '参数file', file);
				// 如果是2 上传  阿里云 3  七牛云
				if (this.storageMode == 2) {
					this.userOssSignature(file);
				}
				if (this.storageMode == 3) {
					this.upPicUrl = this.$api.qnyOssSignature;
					let filesNmae = 'nmoBackground_01.png'; // this.timeDate + 'png'
					this.imgFormData = {
						file: file,
						getsize: file.size,
						getContentType: ['image/png', 'image/jpeg'],
						getoriginalfilename: filesNmae,
						getName: filesNmae
					};
					this.$nextTick(() => {
						this.$refs.selectimgandupload1.upload(); //图片上传
					});
				}
			},
			// 阿里云上传
			async userOssSignature(file) {
				console.log('this阿里云上传进入=======');
				const ts = new Date().getTime();
				const us = {
					ts
				};
				let url = this.$api.alyOssSignature + `${object2Url(us)}`;
				const res = await this.$http.get({
					url: url,
					data: {
						us: us
					}
				});
				this.ossInfo = res.data;
				this.upPicUrl = this.ossInfo?.host;
				// 获取上传图片名称和后缀
				let fileUrl = file[0].url;
				let markIndex = fileUrl.lastIndexOf('.');
				this.suffix = fileUrl.substring(markIndex); //后缀

				console.log('this.ossInfo', this.ossInfo);
				this.imgFormData = {
					name: this.timeDate + this.suffix,
					key: this.timeDate + this.suffix, //上传图片的名字和路径（默认路径根目录，自定义目录：xxx/xxx.png）
					policy: this.ossInfo.policy,
					OSSAccessKeyId: this.ossInfo.accessId,
					success_action_status: '200',
					signature: this.ossInfo.signature
				};
				this.header = {
					'Access-Control-Allow-Origin': '*',
					'x-oss-callback-Authorization': 'access_token'
				};
				this.$nextTick(() => {
					this.$refs.selectimgandupload1.upload(); //图片上传
				});
				console.log('页面阿里云url22222222222222', this.ossInfo?.host + '/' + this.timeDate + this.suffix);
			},
			removeImg(e) {

				console.log(e)
				const removeUrl = e.url

				const findindex = this.imgViewArr.findIndex((item) => {
					return item == removeUrl
				})
				this.imgViewArr.splice(findindex, 1)
				this.$refs.upload1.setItems(this.imgViewArr);
			},
			async sumbit() {
				console.log(this.form)
				
				const res = await this.$http.post({
					url: this.$api.feedback,
					
					data: {
						...this.form,
						technicianId: 1,
						siteId: uni.getStorageSync('siteId')
					}
					 
				})
				if (res.code == 200) {
				this.$sun.toast('感谢您提出的宝贵意见')}
			}
		}
	}
</script>
<style lang="less">
	page {
		background-color: #FFFFFF;

	}

	.feedBack {
		padding: 30rpx;

		.feedbackCategory {


			.feedbackTab {
				margin-top: 40rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #cfd1db;

				.common {
					width: 166rpx;
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					margin-right: 30rpx;
				}

				.sel-stauts-class {
					border-radius: 12rpx;
					border: 1px solid #1890FF;
					background: #E1F1FF;
					color: #1890FF;

				}

				.stauts-class {
					background: #F0F0F0;
					color: #999;


				}

			}
		}

		.feedbackContent {
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #cfd1db;

			.uni-textarea {
				margin-top: 36rpx;

				textarea {
					width: 100%;
					box-sizing: border-box;

					border-radius: 10px;
					background-color: #F0F0F0;
					padding: 15rpx;
				}
			}
		}

		.feedbackPhone {
			height: 300rpx;
		}

		.sumbit-btn {
			height: 100rpx;
			color: #ffffff;
			border-radius: 10px;
			background: #1890FF;
		}
	}
</style>